
<div class="wrap">

    <div id="chat_room-mini-header-test">
        <a href="index.html">
            <div id="chat_room-header-logo"></div>
        </a>
            

            <div id="chat_room-mini-header-sort-by"><a href="#"><span id="privateButton" onclick="swapView('private');">Privates</span></a> | <a href="#"><span id="latestButton" style="color:#D34836" onclick="swapView('chat_room-test');">Latest</span></a> |<a href="#"> <span id="browseButton" onclick="swapView('browse');">Browse</span></a> | <a href="#"><span id="mostUpVotedButton" onclick="swapView('mostUpVoted');">Top Rated</span></a></div>
        
        <div id="arrow" class="chat_room-header-arrow-down"></div>
        
    </div>
    <div id="chat_room-large-header-test">
        <div id="chat_room-large-header-your-topics" ondrop="drop(event)">
      
        </div>
        
        <div id="chat_room-large-header-in-traffic" ondrop="drop(event)" ondragover="allowDrop(event)">
            <img style="position: relative; left: -50%;" src="https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/trash-64.png">
        </div>
        

        
    </div>

	<div id="chat_room-container-test">  
            <div id="browse" style="display:none">
                [Not yet implemented]
                <div id="browse-container" style="display:none">
                    
                    <!-- PARENT -->
                        <div class="browse-topic-wrap">
                            <div class="browse-parent-label">
                                <h2>GAMING</h2>
                            </div>
                        </div>
                    <!-- END PARENT -->
                    <!-- CHILD -->
                        <div class="browse-topic-wrap">
                            <div class="browse-child-label">
                                <h4>LeagueofLegends</h4>
                            </div>
                        </div>
                    <!-- END CHILD -->
                    <!-- CHILDs Child -->
                        <div class="browse-topic-wrap">
                            <div class="browse-childs-child-label">
                                <h4>LookingForLOLTeam</h4>
                            </div>
                        </div>
                    <!-- END CHILDs CHILD -->
                    <!-- CHILD -->
                        <div class="browse-topic-wrap">
                            <div class="browse-child-label">
                                <h4>WorldOfWarcraft</h4>
                            </div>
                        </div>
                    <!-- END CHILD -->
                    <!-- CHILD -->
                        <div class="browse-topic-wrap">
                            <div class="browse-child-label">
                                <h4>TeamFortress2</h4>
                            </div>
                        </div>
                    <!-- END CHILD -->
                    <!-- PARENT -->
                        <div class="browse-topic-wrap">
                            <div class="browse-parent-label">
                                <h2>Politics</h2>
                            </div>
                        </div>
                    <!-- END PARENT -->
                    <!-- PARENT -->
                        <div class="browse-topic-wrap">
                            <div class="browse-parent-label">
                                <h2>Sports</h2>
                            </div>
                        </div>
                    <!-- END PARENT -->
                    
                </div>
            </div>
            <div id="mostUpVoted" style="display:none">
                <span class="10" style="display: block"><div class="message-container"><div class="message-author"><a href="profile.html?name=SERVER" target="_blank">SERVER</a></div><div class="message-image" style="background-image:url(bilder/server1.png);"><div class="message-account"></div></div><div class="message-overlay">I watch you when you sleep.</div>Loading most upvoted...</div></span>
            </div>
            <div id="private" style="display:none">[Not yet implemented]</div>
            <div id="chat_room-test">
                <span class="10" style="display: block"><div class="message-container"><div class="message-author"><a href="profile.html?name=SERVER" target="_blank">SERVER</a></div><div class="message-image" style="background-image:url(bilder/server1.png);"><div class="message-account"></div></div><div class="message-overlay">I watch you when you sleep.</div>Loading chat...</div></span>
            </div>
        </div>
	
        <form action='' id='chat_form'>
            <div id="reply-form-container">
                <textarea id="message" required ></textarea>
                <div id="chat_room-choose-color">
                    
                </div>
                <input id="reply-form-button" type="submit" value="">
                <div id="chat_room-show-commands" onclick="showCommands();"></div>
                <div id="commandBox" style="display:none">
                    <a href="#">
                    <div class="tinyExit" onclick="hideCommands();"></div></a>
                    
                    <table>
                        <tr><td class="command">!join "topic"</td></tr>
                        <tr><td class="command">!leave "topic"</td></tr>
                        <tr><td class="command">!favourite "topic"</td></tr>
                        <tr><td class="command">!unfavourite "topic"</td></tr>
                        <tr><td class="command">!focus "topic"</td></tr>
                        <tr><td class="command">@"user" your private message</td></tr>
        
                       
                        
                    </table>
                </div>

                <!--<div id="reply-form-image-upload"></div>-->
            </div>	
        </form>
		
	</div>
	
<script type="text/javascript" src="js/chat.js"></script>